<!-- 登陆页面 -->
<template>
	<div class="app">
		<div class="panel">
			<div class="left">
				<img src="https://sujeking.github.io/cxy/imgs/logo.png" class="logo">
				<input class="input unameTF" type="text" name="" placeholder="账号">
				<input class="input upassTF" type="password" name="" placeholder="密码">
				<button class="button">登录</button>
				<button class="linbtn" @click='linkbtnClick'>没有账号,去这里注册</button>
			</div>
			<img class="right" src=''></img>
		</div>
	</div>
</template>

<script>
	export default {
		methods:{
			linkbtnClick(){
				this.$router.push({name:'new'});
			}
		}
	}
</script>

<style scoped>
	.app {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content:center;
		align-items: center;
		background-color: #f5f5f5;
	}
	.panel {
		width: 60%;
		height: 680px;
		box-shadow: 0 5px 100px;	
		border-radius: 10px;
		display: flex;
	}
	.left {
		position: relative;
		background-color: #ffffff;
		padding-left: 30px;
		padding-right: 30px;
		flex: 0.3;
		display: flex;
		flex-direction: column;
		align-items: flex-direction;
	}

	.logo {
		max-width: 100%;
		margin-top: 60px;
		float: left;
		margin-left: 15px;
		align-self: flex-start;
	}
	
	.input {
		height: 48px;
		font-size: 18px;
		margin-bottom: 15px;
		padding-left: 15px;
		outline: none;
		width: calc(100% - 20px);
		border: 0;
		border-bottom: 2px solid #f1f1f1;
	}
	.unameTF{
		margin-top: 80px;
	}

	.upassTF {
	
	}

	.button{
		height: 48px;
		color: white;
		outline: none;
		font-size: 18px;
		width: 120px;
		border: 0;
		align-self: flex-end;
		margin-top: 20px;
		background-color: #398dee;
	}

	.linbtn {
		color: #398dee;
		border: 0;
		outline: none;
		font-size: 16px;
		position: absolute;
		width: 100%;
		height: 23px;
		bottom: 20px;
		left: 0;
	}
	.right {
		
	}
</style>